<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: Ted Rader - 0
-->

<script>
// slideshow.js
// Created by Ted Rader
// Version: 1.0.0
// Free to use, distribute, blah blah blah
// No warranty implied or expressed - use at your own risk
//
// Tested in Internet Explorer 6, Firefox 1.5.0.4, and Opera 9
//
// Future functionality planned:
// ability to click on image to view hi-res image in new window;
// optional scaling of images to fit parent container's existing boundaries
//
// Usage:
// Step 1) create an array to hold your images (and optional description text)
// note: array can be named whatever you want, but must start at [0]
// and have the following structure:
//
// var picArray = new Array; // must be global or within the same scope and before initSlideShow()
//
// picArray[0] = new Image;
// picArray[0].src = "pic1.jpg";
// picArray[0].desc = "Some description text"; // desc is optional, and will also be used as ALT text for the image
//
// picArray[1] = new Image;
// picArray[1].src = "pic2.jpg";
// picArray[1].desc = "Some description text";
//
// picArray[2] = new Image;
// picArray[2].src = "pic3.jpg";
// picArray[2].desc = "Some description text";
//
//
// Step 2) if you plan on using optional image buttons instead of HTML buttons, create an
// array to hold the images, including optional mouseover and disabled images;
// Note: array must have ["prev"] and ["next"] sub-arrays, and, at a minimum, must
// have the ".normal" declarations for both sub-arrays
//
// var btnArray = new Array; // must be global or within the same scope and before initSlideShow()
//
// btnArray["prev"] = new Array;
//
// btnArray["prev"].normal = new Image;
// btnArray["prev"].normal.src = "btn_prev_normal.gif";
// 
// btnArray["prev"].hover = new Image; // if "mouseover" image isn't included, will use "normal" instead
// btnArray["prev"].hover.src = "btn_prev_over.gif";
//
// btnArray["prev"].disabled = new Image; // if "disabled" image isn't include, will use "normal" instead
// btnArray["prev"].disabled.src = "btn_prev_disabled.gif";
//
// btnArray["next"] = new Array;
//
// btnArray["next"].normal = new Image;
// btnArray["next"].normal.src = "btn_next_normal.gif";
//
// btnArray["next"].hover = new Image;
// btnArray["next"].hover.src = "btn_next_over.gif";
//
// btnArray["next"].disabled = new Image;
// btnArray["next"].disabled.src = "btn_next_disabled.gif";
//
//
// Step 3) initialize the slideshow with image array, optional button image
// array, element ids for where to place slideshow outputs, etc.
// NOTE: you must not run initSlideShow() before the page has loaded! Either
// run it "onload" or place it within SCRIPT tags in the BODY anywhere
// after the last element that is referenced in the initSlideShow() arguments
//
// Example (see actual function declaration below for detailed argument comments):
// initSlideShow(
// picArray,
// false,
// btnArray,
// "prevButtonLoc",
// "Previous Image",
// "nextButtonLoc",
// "Next Image",
// "imgLoc",
// "descriptionLoc",
// "imageCounterLoc"
// );
//
//
// Step 4) set up your HTML placeholders - I prefer to use span's, but you could
// use div's, td's, or whatever elements you choose as long as they can have
// child nodes. You can include text or other elements within the placeholder
// elements (in the following example, "imageCounterLoc" has the text "Image "
// that will precede the slideshow's counter output - "1 of 3") - the slideshow
// elements will be added after existing elements; note: each placeholder must
// have a unique ID assigned to it
//
// Example:
// <table style="width:100%; text-align:center">
// <tr><td>
// <span id="prevButtonLoc"></span> 
// <span id="nextButtonLoc"></span>
// </td></tr>
// <tr><td><span id="imageCounterLoc">Image </span></td></tr>
// <tr><td><span id="descriptionLoc">Image Description: </span></td></tr>
// <tr><td><span id="imgLoc"></span></td></tr>
// </table>



var imgArray;
var btnArray;
var showDescription;
var showCounter;
var looping;
var prevButton;
var nextButton;
var firstPic = 0;
var currentPic = 0;
var lastPic;
var imageElement;
var descriptionElement;
var counterElement;
var prevBtnText;
var nextBtnText;

function initSlideShow(
 imageArray, // array containing your images and description text
 allowLoop, // allow looping (true or false)
 buttonArray, // array containing button images, use empty string ("") to use HTML buttons
 previousButtonLocID, // id of element placeholder for your previous button or image
 previousButtonText, // text for the "Previous" HTML button, used as ALT text if using image buttons
 nextButtonLocID, // id of element placeholder for your next button or image
 nextButtonText, // text for the "Next" HTML button, used as ALT text if using image buttons
 imgLocID, // id of element placeholder for your slideshow images
 descriptionElementID, // id of element placeholder for your description text
 counterElementID // id of element placeholder for your image counter
) { // function starts here
 imgArray = imageArray;
 btnArray = buttonArray;
 showDescription = descriptionElementID;
 showCounter = counterElementID;
 looping = allowLoop;
 lastPic = imgArray.length - 1;
 prevBtnText = previousButtonText;
 nextBtnText = nextButtonText;
 prevButton = document.createElement("input");
 nextButton = document.createElement("input");
 if (btnArray) {
 prevButton.type = "image";
 prevButton.alt = prevBtnText;
 prevButton.onmouseover = function(){swapPrev("over")};
 prevButton.onmouseout = function(){swapPrev("out")};
 nextButton.type = "image";
 nextButton.alt = nextBtnText;
 nextButton.onmouseover = function(){swapNext("over")};
 nextButton.onmouseout = function(){swapNext("out")};
 swapPrev("disabled");
 swapNext("out");
 }
 else {
 prevButton.type = "button";
 prevButton.value = prevBtnText;
 nextButton.type = "button";
 nextButton.value = nextBtnText;
 }
 prevButton.onclick = showPrev;
 nextButton.onclick = showNext;
 document.getElementById(previousButtonLocID).appendChild(prevButton);
 document.getElementById(nextButtonLocID).appendChild(nextButton);
 if (!looping) prevButton.disabled = true;
 imageElement = document.createElement("img");
 imageElement.src = imgArray[firstPic].src;
 imageElement.alt = imgArray[firstPic].desc;
 document.getElementById(imgLocID).appendChild(imageElement);
 if (showDescription) {
 descriptionElement = document.createTextNode(imgArray[firstPic].desc);
 document.getElementById(descriptionElementID).appendChild(descriptionElement);
 }
 if (showCounter) {
 counterElement = document.createTextNode("1 of " + parseInt(lastPic + 1));
 document.getElementById(counterElementID).appendChild(counterElement);
 }
} // end initSlideShow()


function showPrev() {
 currentPic --;
 if (!looping) {
 nextButton.disabled = false;
 if (btnArray) swapNext("out");
 prevButton.disabled = (currentPic == firstPic);
 if (btnArray && prevButton.disabled) swapPrev("disabled");
 }
 else if (currentPic < firstPic) currentPic = lastPic;
 showPic();
} // end showPrev()

function showNext() {
 currentPic ++;
 if (!looping) {
 prevButton.disabled = false;
 if (btnArray) swapPrev("out");
 nextButton.disabled = (currentPic == lastPic);
 if (btnArray && nextButton.disabled) swapNext("disabled");
 }
 else if (currentPic > lastPic) currentPic = firstPic;
 showPic();
} // end showNext()

function showPic() {
 imageElement.width = imgArray[currentPic].width;
 imageElement.height = imgArray[currentPic].height;
 imageElement.src = imgArray[currentPic].src;
 imageElement.alt = imgArray[currentPic].desc;
 if (showDescription) descriptionElement.nodeValue = imgArray[currentPic].desc;
 if (showCounter) counterElement.nodeValue = parseInt(currentPic + 1) + " of " + parseInt(lastPic + 1);
} // end showPic()

function swapPrev(state) {
 swapButtonImage(prevButton, btnArray["prev"], state, prevBtnText);
}

function swapNext(state) {
 swapButtonImage(nextButton, btnArray["next"], state, nextBtnText);
}

function swapButtonImage(elementObj, btnArray, state, altText) {
 switch (state) {
 case "over":
 try { elementObj.src = btnArray.hover.src; }
 catch(asdf) { elementObj.src = btnArray.normal.src; }
 break;
 case "out":
 if (!elementObj.disabled) {
 elementObj.src = btnArray.normal.src;
 elementObj.alt = altText;
 }
 break;
 case "disabled":
 try { elementObj.src = btnArray.disabled.src; }
 catch(asdf) { elementObj.src = btnArray.normal.src; }
 elementObj.alt = altText + " (disabled)";
 break;
 }
} // end swapButtonImage()
</script>
<script type="text/javascript">
var picArray = new Array;
var i=0;
picArray[i] = new Image;
picArray[i].src = "blue_ball0.gif";
picArray[i++].desc = "This is example picture 1";

picArray[i] = new Image;
picArray[i].src = "red_ball0.gif";
picArray[i++].desc = "This is example pictures 2";

picArray[i] = new Image;
picArray[i].src = "green_ball0.gif";
picArray[i++].desc = "This is example pictures 3";

var btnArray = new Array;
btnArray["prev"] = new Array;
btnArray["prev"].normal = new Image;
btnArray["prev"].normal.src = "btn_prev_normal.gif";

btnArray["prev"].hover = new Image;
btnArray["prev"].hover.src = "btn_prev_over.gif";

btnArray["prev"].disabled = new Image;
btnArray["prev"].disabled.src = "btn_prev_disabled.gif";

btnArray["next"] = new Array;
btnArray["next"].normal = new Image;
btnArray["next"].normal.src = "btn_next_normal.gif";

btnArray["next"].hover = new Image;
btnArray["next"].hover.src = "btn_next_over.gif";

btnArray["next"].disabled = new Image;
btnArray["next"].disabled.src = "btn_next_disabled.gif";

function init() {
 initSlideShow(
 picArray,
 true,
 "",
 "prevButtonLoc",
 "Previous Image",
 "nextButtonLoc",
 "Next Image",
 "imgLoc",
 "descriptionLoc",
 "imageCounterLoc"
 )
}
</script>


</head>
<body onload=";initScript();">

<table style="width:100%; text-align:center">
 <tr><td>
 <span id="prevButtonLoc"></span> 
 <span id="nextButtonLoc"></span>
 </td></tr>
 <tr><td><span id="imageCounterLoc">Image </span></td></tr>
 <tr><td><span id="descriptionLoc">Image Description: </span></td></tr>
 <tr><td><span id="imgLoc"></span></td></tr>
</table>

<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center>
</body>
</html>


